<script setup  name="App">
    import { storeToRefs } from 'pinia';
    import { useGeyaoStore } from './store/index.js';
    import { toRefs } from 'vue'
    
    // const counterstate = useGeyaoStore();
    // console.log(counterstate);
    // console.log(counterstate.name);
    // console.log(counterstate.age);
    // console.log(counterstate.$state.name);
    // console.log(counterstate.$state.age);
    
    var {age,name} = storeToRefs(useGeyaoStore());
    const counterstate = useGeyaoStore();
    console.log(storeToRefs(useGeyaoStore()));
    
    counterstate.$subscribe((mutate,state)=>{
       console.log(mutate,state,"geyao is");
    })
    
    const handleAdd = () => {
        age.value ++
    }
    const handleAddTwo = () => {
        counterstate.$patch({age:counterstate.age+1})
    }
    const handleAddThree = () => {
        console.log(counterstate);
        counterstate.increment()
    }
        </script>
        
        <template>
    
       姓名:{{name}}-年龄:{{age}}
       <button @click="handleAdd">年龄加1</button>
       <button @click="handleAddTwo">年龄加1第二种方式</button>
         <button @click="handleAddThree">年龄+1</button>
         
       
        </template>
        
        <style scoped>
        
        </style>
        
        
        
        
        